<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="800" @ok="handleSubmit">
    <a-row span="24" style="padding: 10px 6%;">
      <a-col class="tc_item" span="12">
        <div class="tc_item_tit">投入品名称：</div>
        <a-input v-model:value="formData.name" placeholder="请输入投入品名称" allow-clear />
      </a-col>
      <a-col class="tc_item" span="12">
        <div class="tc_item_tit">俗称：</div>
        <a-input v-model:value="formData.popularName" placeholder="请输入俗称" allow-clear />
      </a-col>
      <a-col class="tc_item" span="12">
        <div class="tc_item_tit">投入品种类：<span>*</span></div>
        <JTreeSelect v-model:value="formData.input" dict="t_classification,name,id" pidField="pid" pidValue="1690898175602962434" hasChildField="has_child"></JTreeSelect>
          <div class="wxts" v-if="errmsg.indexOf('input') > -1">请选择投入品种类!</div>
      </a-col>
      <a-col class="tc_item" span="12">
        <div class="tc_item_tit">品牌：</div>
        <a-input v-model:value="formData.brand" placeholder="请输入品牌" allow-clear />
      </a-col>
      <a-col class="tc_item" span="12">
        <div class="tc_item_tit">特征描述：</div>
        <a-input v-model:value="formData.feature" placeholder="请输入特征描述" allow-clear />
      </a-col>
      <a-col class="tc_item" span="12">
        <div class="tc_item_tit">生产厂家：</div>
        <a-input v-model:value="formData.manufacturer" placeholder="请输入生产厂家" allow-clear />
      </a-col>
      <a-col class="tc_item" span="12">
        <div class="tc_item_tit">出厂日期：</div>
        <a-space direction="vertical" :size="12" >
          <a-date-picker v-model:value="formData.productionDate" placeholder="选择出厂日期"  valueFormat="YYYY-MM-DD" />
        </a-space>
      </a-col>
      <a-col class="tc_item" span="12">
        <div class="tc_item_tit">保质期：</div>
        <a-input v-model:value="formData.qualityPeriod" placeholder="请输入保质期" allow-clear />
      </a-col>
      <!-- <a-col class="tc_item" span="12">
        <div class="tc_item_tit">库存量(KG)：<span>*</span></div>
        <div style="position: relative;">
          <a-input-number v-model:value="formData.stock" placeholder="请输入库存量" allow-clear />
           <span class="jdmj_dw">KG</span>
        </div>
        <div class="wxts" v-if="errmsg.indexOf('stock') > -1">请输入库存量!</div>
      </a-col>
      <a-col class="tc_item" span="12">
        <div class="tc_item_tit">最低库存量(KG)：</div>
        <div style="position: relative;">
          <a-input-number v-model:value="formData.stockLowest" placeholder="请输入最低库存量" allow-clear />
           <span class="jdmj_dw">KG</span>
        </div>
      </a-col>
      <a-col class="tc_item" span="12">
        <div class="tc_item_tit">最高库存量(KG)：</div>
        <div style="position: relative;">
          <a-input-number v-model:value="formData.stockHighest" placeholder="请输入最高库存量" allow-clear />
           <span class="jdmj_dw">KG</span>
        </div>
      </a-col> -->
    </a-row>
    <!-- <a-row> -->
      <!-- <a-col span="8" v-if="!isUpdate">
        <a-list item-layout="horizontal" :data-source="cardData" :pagination="pagination">
          <template #renderItem="{ item }">
            <a-list-item  @click="handleClick(item)">
              <a-list-item-meta
              >
              </a-list-item-meta>

              <a-row>
                <a-col span="24">{{'模板名称：'+item.templateName}}</a-col>
                <a-col span="12">{{'名称：'+item.name}}</a-col>
                <a-col span="12">{{'俗称：'+item.popularName}}</a-col>
                <a-col span="12">{{'投入品种类：'+item.input_dictText}}</a-col>
                <a-col span="12">{{'生产厂家：'+item.manufacturer}}</a-col>
                <a-col span="12">{{'出厂日期：'+item.productionDate}}</a-col>
                <a-col span="12">{{'保质期：'+item.qualityPeriod}}</a-col>
                <a-col span="12">{{'库存量(kg)：'+item.stock}}</a-col>
                <a-col span="12">{{'特征描述：'+item.feature}}</a-col>


              </a-row>
            </a-list-item>
          </template>
        </a-list>
      </a-col> -->
      <!-- <a-col  :span="24">
      <BasicForm @register="registerForm"/>
      </a-col>
    </a-row> -->
  </BasicModal>
</template>

<script lang="ts" setup>
    import {ref, computed, unref, nextTick, watch} from 'vue';
    import {BasicModal, useModalInner} from '/@/components/Modal';
    // import {BasicForm, useForm} from '/@/components/Form/index';
    // import {formSchema} from '../TInputs.data';
    import {saveOrUpdate,createInputByTemplateId} from '../TInputs.api';
    // import {list} from '../../inputsTemplate/InputsTemplate.api';
    // import {defHttp} from "/@/utils/http/axios";
    import JTreeSelect from '/@/components/Form/src/jeecg/components/JTreeSelect.vue'

    // Emits声明
    const emit = defineEmits(['register','success']);
    const isUpdate = ref(true);
    // const cardData = ref([]);
    // const pagination = {
    //   total: 0,
    //   showQuickJumper:true,
    //   onChange: (page: number) => {
    //     pageList({pageSize:5,pageNo:page})
    //   },
    //   pageSize: 5,
    // };
    //表单配置
    // const [registerForm, {setProps,resetFields, setFieldsValue, validate}] = useForm({
    //     //labelWidth: 150,
    //     schemas: formSchema,
    //     showActionButtonGroup: false,
    //     baseColProps: {span: 24}
    // });

    const formData = ref({
      id: '',
      name: '',
      no: '',
      popularName: '',
      brand: '',
      input: '',
      feature: '',
      manufacturer: '',
      productionDate: '',
      qualityPeriod: '',
      // stock: '',
      // stockLowest: '',
      // stockHighest: '',
    })

    const resetFields = () => {
      Object.keys(formData.value).map(key => {
        formData.value[key] = ''
      })
    }

    const setFieldsValue = (data) => {
      console.log(data)
      Object.keys(formData.value).map(key => {
        if (data.hasOwnProperty(key)) {
          formData.value[key] = data[key]
        }
      })
    }

    const getFieldsValue = () => {
      return formData.value;
    }

    const errmsg = ref([])

    const validateFields = (data: PropertyKey[]) => {
      return new Promise<void>(function(resolve, reject){
        errmsg.value = [];
        data.map((field: string) => {
          if (formData.value.hasOwnProperty(field) && formData.value[field] == '') {
            errmsg.value.push(field)
          }
        })
        if (errmsg.value.length) {
          reject(false);
        } else {
          resolve();
        }
      })
    }

    //表单赋值
    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
        //重置表单
        resetFields();
        setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
        isUpdate.value = !!data?.isUpdate;
        if (unref(isUpdate) || !!data.record) {
            //表单赋值
            setFieldsValue({
                ...data.record,
            });
        }else {
          // 获取data数据
          // pageList({pageSize:5,pageNo:1});
        }
        // 隐藏底部时禁用整个表单
       // setProps({ disabled: !data?.showFooter })
    });
    //设置标题
    const title = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));

    // async function handleClick(item) {
    //   // 这里是你处理点击事件的代码
    //   createInputByTemplateId({templateId:item.id})
    //   .then(async res => {
    //     await nextTick();
    //     await resetFields();
    //     await setFieldsValue({...res})
    //   })
    // }
    //表单提交事件
    async function handleSubmit(v) {
      console.log(v)
        try {
            await validateFields(['input']);
            let values = getFieldsValue();
            setModalProps({confirmLoading: true});
            //提交表单
            await saveOrUpdate(values, isUpdate.value);
            //关闭弹窗
            closeModal();
            //刷新列表
            emit('success');
        } finally {
            setModalProps({confirmLoading: false});
        }
    }
    // async  function pageList(page){
    //   list(page).then(res => {
    //     cardData.value = res.records;
    //     pagination.total = res.total;
    //   })
    // }
</script>

<style lang="less" scoped>
  .jdmj_dw {
    position:absolute;top:0;right:0;z-index: 999;
    height: 32px;
    line-height: 32px;
    width: 48px;text-align: center;
    color: #000 !important;
    background: #FAFAFA;
    border: 1px solid #E5E7EB;
  }
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
  .wxts {
    color: #ED6F6F;
    margin-left: 10px;
    font-size: 12px;
    margin-top: 10px;
  }
  .tc_item {
    margin-bottom: 22px;
    padding: 0px 10px;

    &_tit {
      padding-bottom: 10px;
    }
    span {
      color: #FF4D4F;
    }
  }
	/** 时间和数字输入框样式 */
  :deep(.ant-input-number){
		width: 100%
	}

	:deep(.ant-calendar-picker){
		width: 100%
	}
</style>
